<!--
 * @Author: xsh201931773442 1948130520@qq.com
 * @Date: 2022-07-06 14:55:45
 * @LastEditors: xsh201931773442 1948130520@qq.com
 * @LastEditTime: 2022-07-15 15:51:01
 * @FilePath: \financialmanagement\src\views\LoginView.vue
 * @Description: 
 * 
-->
<template>
  <div class="login">
    <div class="title">金融信贷管理系统</div>
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      :model="ruleForm"
      :label-position="labelPosition"
      :hide-required-asterisk="true"
      style="width: 460px"
      :rules="rules"
      size="large"
    >
      <el-form-item label="账户" prop="account" style="color: #fff">
        <el-input
          v-model="ruleForm.account"
          placeholder="请输入账户名"
          clearable
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          type="password"
          placeholder="请输入密码"
          show-password
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="loading"
          :loading="loading"
          type="primary"
          class="denglu"
          @click="submitForm(ruleFormRef)"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { setItem, getItem, removeItem } from '@/tools/storage'
//使用getCurrentInstance来获取上下文
// const { proxy } = getCurrentInstance() 这里的proxy相当于this
const { proxy } = getCurrentInstance()
// proxy.$http.get('api/login')
// .then((response)=>{
//     console.log(response)
// })
const labelPosition = ref('top')
//定义提交的数据
const ruleForm = reactive({
  account: '',
  password: '',
  status: false
})
//路由
const router = useRouter()
//使用ref定义dom对象
const ruleFormRef = ref(null)
//定义验证规则
const rules = reactive({
  account: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 6, max: 15, message: '账户位数只能在6~15之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 15, message: '密码位数只能在6~15之间', trigger: 'blur' }
  ]
})
const loading = ref(false)
//判断账号密码是否正确，成功登录后修改登录状态
const modifyLoginStatus = (ruleForm) => {
  if (!getItem('userInfo')) {
    setItem('userInfo', ruleForm)
  }
  loading.value = true
  setTimeout(() => {
    let userInfo = getItem('userInfo')
    let account = userInfo.account
    let password = userInfo.password
    //判断账号是否登录成功
    if (ruleForm.account === account && ruleForm.password === password) {
      //更改登录状态
      userInfo.status = true
      //将更改后信息的重新存回localstorage
      setItem('userInfo', userInfo)
      router.push({
        path: '/home'
      })
      ElMessage({
        message: '登录成功',
        type: 'success'
      })
    } else {
      loading.value = false
      ElMessage({
        message: '登录失败,账户或密码错误',
        type: 'error'
      })
    }
  }, 3000)()

  // console.log(getItem('userInfo'))
}

//登录验证方法
const submitForm = (ruleFormRef) => {
  // console.log(ruleFormRef)

  if (!ruleFormRef) {
    return
  }
  ruleFormRef.validate((valid) => {
    if (valid) {
      /*还需要进一步验证 如果验证失败 则调用ElMessage.error('登录失败,账户或密码错误') 提示 */
      modifyLoginStatus(ruleForm)
    }
  })
}
</script>
<style lang="scss" scoped>
:deep(.el-form-item__label) {
  color: #fff;
}

.el-form-item__error {
  color: #b34a4a;
}
</style>
<style lang="scss" scoped>
.login {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // background: -webkit-linear-gradient(top left, pink, skyblue);
  background: url(../images/bgc.jpg) no-repeat center;
  background-size: cover;
  //此条属性必须设置否则可能无效
  background-attachment: fixed;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */

  .title {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 40px;
  }

  .denglu {
    width: 460px;
    margin-top: 40px;
  }
}
</style>
